<template>
  <div class="dialog">
    <el-dialog title="预览文章" :visible="isPreviewDialogShow" @close="addCancel">
      <h2>{{ Roles.title }}</h2>
      <div class="name">
        <span>{{ Roles.createTime | formatDate }}</span>
        <span>{{ Roles.username }}</span>
        <span class="el-icon-user" />
        <span>{{ Roles.visits }}</span>
      </div>
      <div class="content">
        <p v-html="Roles.articleBody" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
	name: 'PreviewDialog',
	props: {
		isPreviewDialogShow: {
			type: Boolean
		},
		// eslint-disable-next-line vue/prop-name-casing
		Roles: {
			type: Object,
			default: () => {}
		}
	},
	methods: {
		addCancel() {
			this.$emit('update:isPreviewDialogShow', false)
		}
	}
}
</script>

<style scoped>
::v-deep .el-dialog{
	border-radius: 15px;
}
::v-deep .el-dialog__header{
	background-color:#409eff;
	border-radius: 15px 15px 0 0;

}
::v-deep .el-dialog__title{
	color:#fff;
}
::v-deep .el-dialog__close{
	color:#fff
}
.name span{
	margin-right: 20px;
}
.content{
	width: 100%;
	background-color: #eee;
	line-height: 60px;
	padding: 0 10px;
	border-top: 1px dashed #ccc;
	margin-top: 8px;
}
::v-deep .el-dialog__body{
	padding: 15px 20px;
}
::v-deep .el-dialog__body h2{
	margin: 10px 0;
}
</style>